@keyframes collapse-width {
  from {
    width: var(--#{$namespace}-aside-width);
  }

  to {
    width: var(--#{$namespace}-aside-width-collapse);
  }
}

@keyframes no-collapse-width {
  from {
    width: var(--#{$namespace}-aside-width-collapse);
  }

  to {
    width: var(--#{$namespace}-aside-width);
  }
}

.#{$namespace}-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  &:not(.#{$namespace}-container__mix) {
    &.#{$namespace}-container__multiple-nav {
      flex-direction: column;
    }
  }

  &.#{$namespace}-container__show-header {
    &.#{$namespace}-container__mix {
      height: calc(100% - #{var(--maia-nav-header-height)});
    }
  }

  .#{$namespace}-header {
    height: var(--maia-nav-header-height);
    padding: 0;
  }

  .#{$namespace}-aside {
    width: var(--#{$namespace}-aside-width);

    &.collapse {
      width: var(--#{$namespace}-aside-width-collapse);
      animation-name: collapse-width;
      animation-duration: 300ms;
    }

    &.no-collapse {
      width: var(--#{$namespace}-aside-width);
      animation-name: no-collapse-width;
      animation-duration: 300ms;
    }
  }

  .nav-tag-list {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
  }

  .#{$namespace}-main {
    position: relative;
    height: 100%;
    padding: 0 var(--#{$namespace}-main-padding) var(--#{$namespace}-main-padding);

    &.mul-nav-main {
      box-sizing: border-box;
      padding: 0 var(--#{$namespace}-main-padding) var(--#{$namespace}-main-padding);
    }
    &.#{$namespace}-main__mix {
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow-y: hidden;
    }
  }
}

// 控制路由变化时间页面动效
.router-view__fade-enter-active,
.router-view__fade-leave-active {
  transition: opacity 0.3s linear;
}

.router-view__fade-enter-from,
.router-view__fade-leave-to {
  opacity: 0;
}
